<template>
	<view class="page">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelWidth='100' :model="userInfo" :rules="rules" ref="Fform">
			<u-form-item label="出险时间" prop="repairDate" borderBottom @click="occurrenceModel = true" required>
				<u--input v-model="userInfo.repairDate" disabled disabledColor="#ffffff" placeholder="请选择出险时间"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="接收信息时间" prop="receiveMsgDate" borderBottom required @click="receiveMsgDateModel = true">
				<u--input v-model="userInfo.receiveMsgDate" disabled disabledColor="#ffffff" placeholder="请选择接收信息时间"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="线索创建时间" prop="clueCreateDate" borderBottom @click="clueCreateDateModel = true">
				<u--input v-model="userInfo.clueCreateDate" disabled disabledColor="#ffffff" border="none">
				</u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="报案人" prop="reportPerson" borderBottom required>
				<u--input v-model="userInfo.reportPerson" border="none"></u--input>
			</u-form-item>
			<u-form-item label="性别" prop="sex" borderBottom @click="showSex = true">
				<u--input v-model="userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none">
				</u--input>
				<u-icon slot="right" name="arrow-down"></u-icon>
			</u-form-item>
			<u-form-item label="车牌号" prop="carId" borderBottom @click="plateShow = true;" required>
				<u--input v-model="userInfo.carId" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none">
				</u--input>
				<u-icon slot="right" name="arrow-down"></u-icon>
			</u-form-item>
			<u-form-item label="电话" prop="phone" borderBottom required>
				<u--input v-model="userInfo.phone" border="none" type='number' maxlength="11"></u--input>
			</u-form-item>
			<u-form-item label="保险公司" prop="insCompanyId" borderBottom @click="insCompanyIdModel(1)">
				<u--input v-model="userInfo.insCompanyId" disabled disabledColor="#ffffff" border="none">
				</u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="是否返修" prop="isReturnRepair" borderBottom @click="showIsReturnRepair= true">
				<u--input v-model="userInfo.isReturnRepair" disabled disabledColor="#ffffff" placeholder="请选择是否返修"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-down"></u-icon>
			</u-form-item>
			<u-form-item label="出险省" prop="repairProvince" borderBottom @click="insCompanyIdModel(2)">
				<u--input v-model="userInfo.repairProvince" disabled disabledColor="#ffffff" border="none">
				</u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="出险市" prop="repairCity" borderBottom @click="insCompanyIdModel(2)">
				<u--input v-model="userInfo.repairCity" disabled disabledColor="#ffffff" border="none">
				</u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="出险地点" prop="repairAddress" borderBottom>
				<u--input v-model="userInfo.repairAddress" border="none"></u--input>
			</u-form-item>
			<u-form-item label="线索创建人" prop="clueCreatePerson" borderBottom>
				<u--input v-model="userInfo.clueCreatePerson" border="none"></u--input>
			</u-form-item>
			<u-form-item label="跟踪人" prop="trackPerson" borderBottom>
				<u--input v-model="userInfo.trackPerson" border="none"></u--input>
			</u-form-item>
			<u-form-item label="是否到店" prop="isInStore" borderBottom @click="showisInStore= true">
				<u--input v-model="userInfo.isInStore" disabled disabledColor="#ffffff" placeholder="请选择是否到店"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-down"></u-icon>
			</u-form-item>

			<u-form-item label="备注" prop="clueRemark">
				<u--textarea v-model="userInfo.clueRemark" placeholder="请输入内容"></u--textarea>
			</u-form-item>
		</u--form>
		<u-button type='primary' @click="submit">提交</u-button>
		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false" @select="sexSelect" />
		<u-action-sheet :show="showIsReturnRepair" :actions="type" title="请选择是否返修" @close="showIsReturnRepair = false"
			@select="isReturnRepairSelect" />
		<u-action-sheet :show="showisInStore" :actions="type" title="请选择是否到店" @close="showisInStore = false"
			@select="isInStoreSelect" />
		<u-calendar :show="occurrenceModel" mode="single" @confirm="confirmOccurrence" @close='occurrenceModel=false'
			closeOnClickOverlay />
		<u-calendar :show="receiveMsgDateModel" mode="single" @confirm="confirmReceiveMsgDate"
			@close='receiveMsgDateModel=false' closeOnClickOverlay />
		<u-calendar :show="clueCreateDateModel" mode="single" @confirm="clueCreateDateMsgDate"
			@close='clueCreateDateModel=false' closeOnClickOverlay />

		<plate-input v-if="plateShow" :plate="userInfo.carId" @export="setPlate" @close="plateShow = false"
			@transfer="getUser" />
	</view>
</template>

<script>
	import plateInput from '@/common/components/uni-plate-input/uni-plate-input.vue';
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	const date = d.getDate()

	export default {
		components: {
			plateInput
		},
		data() {
			var phoneRule = (rule, value, callback) => {
				if (this.validatePhone(value)) {
					callback()
				} else {
					callback(new Error('请正确输入手机号码'))
				}
			}
			return {
				occurrenceModel: false, //出险时间弹框
				receiveMsgDateModel: false, //接收信息时间弹窗
				clueCreateDateModel: false, //线索创建时间弹窗
				showSex: false, //性别
				plateShow: false, //车牌号弹框
				showisInStore: false, //是否到店
				showIsReturnRepair: false, //是否返修

				userInfo: {
					repairDate: '', //出险时间
					receiveMsgDate: '', //接收信息时间
					clueCreateDate: `${year}-${month}-${date}`, //线索创建时间
					reportPerson: '', //报案人
					sex: '', //性别
					carId: '', //车牌号
					isNewEnergy: 7, //是否新能源
					phone: '', //手机号
					insCompanyId: '', //保险公司
					isReturnRepair: '', //是否返修
					repairProvince: '', //出险省
					repairCity: '', //出险市
					repairAddress: '', //出现地点
					clueCreatePerson: '', //线索创建人
					trackPerson: '', //跟踪人
					clueRemark: '', //备注
				},

				actions: [{
						name: '男',
					},
					{
						name: '女',
					}
				],
				type: [{
						name: '是',
					},
					{
						name: '否',
					}
				],


				rules: {
					'receiveMsgDate': {
						type: 'string',
						required: true,
						message: '请填写接收信息时间',
						trigger: ['blur', 'change']
					},
					'repairDate': {
						type: 'string',
						required: true,
						message: '请填写出险时间',
						trigger: ['blur', 'change']
					},
					'reportPerson': {
						type: 'string',
						required: true,
						message: '请填写报案人',
						trigger: ['blur', 'change']
					},
					'carId': {
						type: 'string',
						required: true,
						message: '请填写车牌号',
						trigger: ['blur', 'change']
					},
					'phone': [{
							required: true,
							max: 11,
							min: 11,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: phoneRule,
							message: "手机号格式不正确",
							trigger: ['blur', 'change'],
						},
					]
				},

			};
		},
		//如果是自己封装的组件就是mounted() 
		//如果不是组件就是onReady()
		onReady() {
			this.$refs.Fform.setRules(this.rules);
		},


		methods: {

			insCompanyIdModel(id) {
				//保险公司
				uni.navigateTo({
					url: '/pagesA/index/brand?id=' + id
				})

			},
			validatePhone: (val) => {
				return /^1[3456789]\d{9}$/.test(val);
			},
			//出险时间
			confirmOccurrence(E) {
				this.occurrenceModel = false
				this.userInfo.repairDate = E[0]
				this.$refs.Fform.validateField('repairDate')
			},
			confirmReceiveMsgDate(E) {
				this.receiveMsgDateModel = false
				this.userInfo.receiveMsgDate = E[0]
				this.$refs.Fform.validateField('receiveMsgDate')
			},
			clueCreateDateMsgDate(E) {
				this.clueCreateDateModel = false
				this.userInfo.clueCreateDate = E[0]
			},

			submit() {
				this.$refs.Fform.validate().then(res => {
					uni.$u.toast('校验通过')
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},

			sexSelect(e) {
				this.userInfo.sex = e.name
				this.$refs.Fform.validateField('sex')
			},
			isReturnRepairSelect(e) {
				this.userInfo.isReturnRepair = e.name
			},
			isInStoreSelect(e) {
				this.userInfo.isInStore = e.name
			},
			getUser(msg) {
				this.userInfo.carId = ''
				if (msg.value == 1) {
					this.userInfo.isNewEnergy = 7
				} else {
					this.userInfo.isNewEnergy = 8
				}
			},
			setPlate(plate) {
				if (plate.length >= 7) this.userInfo.carId = plate;
				this.plateShow = false;
			},
		},
		onLoad() {
			this.$request('getCluePerson', {}, 'get', {
				companyCode: 361
			}).then(res => {})
			
			

		}
	};
</script>
<style>
	.page {
		padding: 10rpx 20rpx;
		box-sizing: border-box;
	}
</style>
